// 部门(分公司)项
<template>
    <div class="department-item" @click='select' :class='classname'>

        <div class="container">

            <div class="pag">
                <span class="icon iconfont" v-if='data.icon' :class='data.icon'></span>
                <div v-if='data.img' class="img-box">
                    <img :src="data.img" alt="pag">
                </div>
            </div>
        
                <h1 class="title">
                    {{data.name}}
                </h1>

                <div class="btns" @click.stop='()=>{}' v-if='btns.length > 0'>

                    <div class="btns-container">
                        <c-btn-icon v-for='(btn, index) of  btns' :icon='btn.icon' :type='btn.type' :key='index' @click='btn.fn(data)'></c-btn-icon>
                    </div>
                    
                </div>
                
        </div>
        
    </div>
</template>

<script lang='ts'>
import {Component, Prop,  Watch, Vue} from 'vue-property-decorator'


@Component({})
export default class departmentItem extends Vue{
    name:string = 'departemnt-item'
    
    // 加载数据
    @Prop()
    data

    // 组件类型
    @Prop()
    type:string

    // 是否可用
    @Prop()
    disabled:boolean

    // 是否被选中
    @Prop({
        default: false
    })
    selected:boolean

    // 加载操作按键
    @Prop({
        default: () =>[]
    })
    btns:any[]
    

    get classname(){

        let name = this.selected ? ['selected'] : []
        name.push(this.type)
        return name
    }
 
    select (){
        
        this.data['expand'] = !this.data['expand'];
        this.$emit('select', this.data)

    }
 
}


</script>

<style lang='scss'>

 $btnsW: _rem(60px);
 
.selected.department-item{
    border-color: $main_color;
    box-shadow: $default_shadow;
    
    .btns{
            margin-left: _intervals(2) ;
            flex: 0 $btnsW;
            width: $btnsW;
        }
}

.small.department-item{

    margin:  0 0 0 _intervals();
    padding: _rem(4px) _intervals(1);
    
    .title{
        font-size: $font_small;
    }

}

.larg.department-item{

    .title{
        font-weight: 600;
    }

    .pag{
       
        .img-box{
            @extend %img_box;
            overflow: hidden;
            $size: _rem(28px);
            width: $size;
            height: $size;
            border-radius: 100%;
        }
    }

}

.department-item{
    display: inline-block;

    margin:  0 0 0 _intervals();
    padding: _rem(4px) _intervals();
    border: _rem(2px) solid transparent;
    border-radius: $border_radius; 
    
    cursor: default;
    transition: all $transition_time;

   
    &:hover{
        border-color: $main_color;
        box-shadow: $default_shadow;
        .btns{
            margin-left: _intervals(2) ;
            flex: 0 $btnsW;
            width: $btnsW;
        }
    }

    .pag{
       
        .img-box{
            @extend %img_box;
            overflow: hidden;
            $size: _rem(24px);
            width: $size;
            height: $size;
            border-radius: 100%;
        }
    }
    
    .container{
        display: flex;
        align-items: center;
    }

    span.icon{
        margin-right: _rem(6px);   
        font-size: _rem(18px);
    }
    
    .title{
        font-size: $font_md;
        font-weight: 400;
    }

    .btns{
        overflow: hidden;
        flex: 0 0;
        width: 0;
        transition: all $transition_time;
        text-align: right;
    }

    .btns-container{
        width: $btnsW;
    }
    
    

}




</style>